<template>
  <view class="login-box">
    <view class="login-content">
      <view class="content">
        <u--input
          placeholder="请输入手机号"
          :maxlength="11"
          type="number"
          :height="40"
          :focus="false"
          v-model="userInfo.userName"
          border="none"
        ></u--input>
        <u-input
          placeholder="请输入验证码"
          :maxlength="10"
          :height="40"
          :focus="false"
          v-model="userInfo.smsCode"
          border="none"
        >
          <template slot="suffix">
            <text @click="getCode" class="tips">{{ tips || time + "s" }}</text>
          </template>
        </u-input>
        <u-input
          placeholder="请输入新密码"
          :maxlength="50"
          :height="40"
          :focus="false"
          v-model="userInfo.password"
          border="none"
          v-if="type === 'password'"
          type="password"
        >
          <template slot="suffix">
            <u-icon @tap="showPwd" color="#999" size="24" name="eye"></u-icon>
          </template>
        </u-input>
        <u-input
          placeholder="请输入新密码"
          :maxlength="50"
          :height="40"
          :focus="false"
          v-model="userInfo.password"
          border="none"
          v-else
          type="text"
        >
          <template slot="suffix">
            <u-icon
              @tap="showPwd"
              color="#00a8ff"
              size="24"
              name="eye"
            ></u-icon>
          </template>
        </u-input>
      </view>
      <view class="sub">
        <u-button
          v-if="
            userInfo.userName.trim() &&
            userInfo.password.trim() &&
            userInfo.smsCode.trim()
          "
          @click="getSubmit"
          type="primary"
          text="修改密码"
        ></u-button>
        <u-button v-else type="primary" disabled="disabled">修改密码</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { getStoreData, setStoreData, httpPost, httpGet } from "@/utils/http.js";
const app = getApp();
const globalData = app.globalData;
const wxApi = globalData.wxApi;
const logo = require(`@/img/logo.png`);
export default {
  data() {
    return {
      time: 60,
      tips: "点击获取",
      logo,
      type: "password",
      checked: [],
      userInfo: {
        userName: "",
        smsCode: "",
        password: "",
      },
    };
  },
  onShow() {},
  onLoad() {
    // wx.setNavigationBarColor({
    //   frontColor: "#000",
    //   backgroundColor: "#000",
    // });
  },
  methods: {
    getCode() {
      const _this = this;
      const userName = this.userInfo.userName.trim();
      if (this.time < 60) {
        uni.showToast({
          title: "请在" + this.time + "s后获取",
          icon: "none", //默认success
          duration: 1500,
        });
        return;
      }
      if (userName && String(userName).length === 11) {
        httpGet("/api/sms/send/forgot/" + userName)
          .then((res) => {
            _this.tips = "";
            _this.timer = setInterval(() => {
              _this.time--;
              if (_this.time <= 0) {
                _this.time = 60;
                _this.tips = "点击获取";
                clearInterval(_this.timer);
              }
            }, 1000);
          })
          .catch((e) => {});
      } else {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none", //默认success
          duration: 1500,
        });
      }
    },
    showPwd() {
      if (this.type === "password") {
        this.type = "text";
      } else {
        this.type = "password";
      }
    },
    getSubmit() {
      const _this = this;
      const _wx = wx;
      const parmas = {
        userName: this.userInfo.userName.trim(),
        smsCode: this.userInfo.smsCode.trim(),
        password: this.userInfo.password.trim(),
      };
      httpPost("/api/user/forgetPassword", parmas)
        .then((res) => {
          uni.showToast({
            title: "密码修改成功",
            icon: "none", //默认success
            duration: 1500,
          });
          setTimeout(() => {
            uni.redirectTo({ url: "/pages/index/index" });
          }, 1500);
        })
        .catch((e) => {});
    },
  },
};
</script>

<style lang="scss">
@import "./style/update-pwd.scss";
</style>
